HTML Layout Design

1/29/2020 7:13:44 AM

In this part we just design the layout page. We use the basic tag to design the website also from. Now given bellow the code and explain the code:

<!DOCTYPE html>
<html>
      <head>
      	<title>This is HTML</title>
      </head>
      <body style="background-color: #C7C7C7"> 
<div style="border-left: 2px solid black;border-right: 2px solid black;">
    <div style="border:1px solid black;height: 180px">
      <img src="D:\Office Work\Article Writing\HTML\img/Bannar.jpg" style="height: 180px;width: 100%">
    </div>
    <div style="padding: 5px">
      <div style="border:1px solid black;height: 280px;width: 49%;float: left;background-color: #B8DAD3">
        <div style="padding-top: 30px;line-height: 40px;font-weight: bold;">
          <ol>
            <li><a href="#">Java</a></li>
            <li><a href="#">C#</a></li>
            <li><a href="#">Python</a></li>
           <li><a href="#">JavaScript</a></li>
          </ol>
        </div>
      </div>
      <div style="border:1px solid black;height: 280px;width: 49%;float: right;background-color: #B8DAD3">
         <div style="padding-top: 30px;line-height: 40px;font-weight: bold;">
          <ul>
            <li><a href="#">Java</a></li>
            <li><a href="#">C#</a></li>
            <li><a href="#">Python</a></li>
           <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div style="clear:both;padding-top: 5px"></div>
    <div style="border:1px solid black;height: 80px;text-align: center;background-color: #3FF014">
      <h2><i>This is my layout footer</i></h2>
    </div>
</div>
      </body>
</html>

Output: